<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<style>
		html,body{
			width: 100%;
			height: 100%;
			overflow: hidden;
		}
		#box{
			width:50px; height: 50px; background: blue;
			position: absolute; left: 100px; top: 150px;
			border-radius: 50%;
		}
	</style>
	<script type="text/javascript">
		
		//做直线运动
		onload = function(){
			var box = document.getElementById("box");
			var speedx = 6;
			var speedy = -16;
			setInterval(function(){
				//x轴移动速度
				box.style.left = box.offsetLeft + speedx + "px";
				//y轴移动速度 初始向上 由于++speedy所以向上速度越来越小 然后转向下
				box.style.top = box.offsetTop + ++speedy + "px";
				//若触碰到下边界 则速度 *-1 弹起 +-代表了方向 而数字大小则代表了速度的大小 原速度为1
				if(box.offsetTop >= window.innerHeight - box.offsetHeight){
					box.offsetTop = window.innerHeight - box.offsetHeight;
					speedy *= -1;
				}
				//右边框
				if(box.offsetLeft >= window.innerWidth - box.offsetWidth){
					box.offsetLeft = window.innerWidth - box.offsetWidth
					speedx*= -1;
				}
				//左边框
				if(box.offsetLeft <= 0){
					box.offsetLeft = 0;
					speedx*= -1;
				}
				//上边框
				if(box.offsetTop <= 0){
					box.offsetTop = 0;
					speedy *= -1;
				}
			},30);
		}
	</script>
	<body>
		<div id="box">
		</div>
	</body>
</html>
